import { ProForm, ProFormCheckbox } from "@ant-design/pro-components";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import {
  Descriptions,
  Form,
  Space,
  Calendar,
  SliderSingleProps,
  Slider,
  theme,
  Typography,
  CalendarProps,
} from "antd";
import type { Dayjs } from "dayjs";
import dayLocaleData from "dayjs/plugin/localeData";
import React, { useEffect, useState } from "react";
import { history } from "umi";
import "./index.less";
import { PaddingContent, ContentBorder } from "@/components/page-padding";
import { CustomSubTitle, CustomTitle } from "@/components/customTitle";
import { StyledAgree, StyledCancel } from "@/components/button";
import { StyledTextAlign } from "@/components/common-styled";
import styled from "styled-components";
import { ProCard } from "@ant-design/pro-components";
import { StyledWhiteBtn } from "@/components/button";
import { StyledDivider } from "@/components/divider";
import MonthlyPark from "@/assets/image/patterns/Monthly Park.png";

dayjs.extend(dayLocaleData);

const StyledCancelBook = styled(StyledWhiteBtn)`
  margin-left: 24px;
  border: 1px solid #c02020;
  color: #c02020;
  &:hover {
    border: 1px solid #c02020 !important;
    color: #c02020 !important;
  }
`;

const BookingLabelStyle = {
  fontFamily: "Roboto",
  fontSize: "14px",
  fontWeight: "400",
  lineHeight: "21px",
  color: "#696767",
};

const BookingContentStyle = {
  fontFamily: "Roboto",
  fontSize: "16px",
  fontWeight: "400",
  lineHeight: "24px",
  color: "#202020",
  marginTop: "8px",
};
const SliderSytle: React.CSSProperties = {
  color: "#fff",
  backgroundColor: "#D1B379",
  borderRadius: "4px",
  width: "32px",
  height: "26px",
  fontFamily: "Roboto",
  fontSize: "16px",
  fontWeight: "700",
  lineHeight: "24px",
  textAlign: "center",
};
const marks: SliderSingleProps["marks"] = {
  0: {
    style: { ...SliderSytle },
    label: <strong>1</strong>,
  },
  100: {
    style: { ...SliderSytle },
    label: <strong>2</strong>,
  },
};

const onChangeSlider = (value: number | number[]) => {
  console.log("onChangeSlider: ", value);
};

const onChangeCompleteSlider = (value: number | number[]) => {
  console.log("onChangeComplete: ", value);
};

const ModifyBooking = () => {
  const { token } = theme.useToken();

  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>["mode"]) => {
    console.log("red: ", "#red");
    console.log(value.format("YYYY-MM-DD"), mode);
  };

  const wrapperStyle: React.CSSProperties = {
    width: 800,
    // border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
    display: "flex",
    flexDirection: "row",
    //padding: 8,
    gap: 56,
  };
  const [form] = Form.useForm<any>();
  const [myMap, setMyMap] = useState(new Map());
  // 在 useEffect 钩子中进行初始的设置
  useEffect(() => {
    setMyMap(
      new Map([
        ["home", "/"],
        ["identity", "/identity"],
      ])
    );
  }, []);

  const toRedirect = (value: string) => {
    history.push(myMap.get(value));
  };

  const onFinish = async (values: any) => {
    console.log("Form values onFinish = ", values);
  };

  // todo 先造数据
  const bookingData = {
    carParkEnName: "carParkEnName",
    carParkChnName: "carParkChnName",
    passType: "Monthly",
    vehType: "Private Car",
    price: "HK$2,000",
    lpnNo: "AC123",
    octopus: "70000111",
    bookingStatus: "Successful",
    bookingId: "0000001",
    startDate: "1/10/2024",
    endDate: "31/10/2024",
    pymPrice: "HK$1,000",
  };

  const weekLabels: any = {
    lang: {
      locale: "en_US",
      shortWeekDays: ["S", "M", "T", "W", "T", "F", "S"],
    },
  };
  const customCellRender = (current: any) => {
    const selectedDate = new Date();
    const isSelected =
      current.date() === selectedDate.getDate() &&
      current.month() === selectedDate.getMonth() &&
      current.year() === selectedDate.getFullYear();
    return (
      <>
        {current.format("D") !== "25" && (
          <div
            className={`ant-calendar-date ${isSelected ? "selected-date" : ""}`}
          >
            {current.format("D")}
          </div>
        )}
        {current.format("D") === "25" && (
          <div className="red-hollow-circle-with-slash">
            {current.format("D")}
          </div>
        )}
      </>
    ); // 返回格式化的日期字符串
  };

  return (
    <>
      <PaddingContent>
        <div className="modify-booking">
          <CustomTitle>Modify Booking</CustomTitle>
          <div className="modifyBooking-content">
            <ContentBorder>
              <ProForm
                form={form}
                onFinish={onFinish}
                submitter={{
                  render: (props) => (
                    <StyledTextAlign>
                      <Space size="large">
                        <StyledCancel
                          type="default"
                          onClick={() => toRedirect("home")}
                          className="footer-button"
                        >
                          Cancel
                        </StyledCancel>
                        <StyledAgree
                          onClick={() => props.form?.submit?.()}
                          className="footer-button"
                          type="default"
                          size={"middle"}
                        >
                          next
                        </StyledAgree>
                      </Space>
                    </StyledTextAlign>
                  ),
                }}
              >
                <ProCard
                  bodyStyle={{
                    display: "flex",
                    justifyContent: "space-between",
                  }}
                  bordered={false}
                  title={<CustomSubTitle>Your Booking</CustomSubTitle>}
                  extra={
                    <StyledCancelBook
                      style={{ margin: "7px 0" }}
                      // onClick={() => setIsModalOpen(true)}
                      type="default"
                      size={"middle"}
                    >
                      Cancel Booking
                    </StyledCancelBook>
                  }
                  layout="center"
                >
                  <img className="park-img" src={MonthlyPark} alt="png"></img>
                  <Descriptions
                    column={5}
                    layout="vertical"
                    title={`Parking Date: 24/9/2024 (1 Day)`}
                    contentStyle={BookingContentStyle}
                    labelStyle={BookingLabelStyle}
                  >
                    <Descriptions.Item label="Octopus No.">
                      {bookingData.octopus}
                    </Descriptions.Item>
                    <Descriptions.Item label="Vehicle Type">
                      {bookingData.vehType}
                    </Descriptions.Item>
                    <Descriptions.Item label="License Plate Number">
                      {bookingData.lpnNo}
                    </Descriptions.Item>
                    <Descriptions.Item label="Paid Amount">
                      {bookingData.pymPrice}
                    </Descriptions.Item>
                    <Descriptions.Item label="Car Park">
                      Car Park1
                    </Descriptions.Item>
                  </Descriptions>
                </ProCard>
                <StyledDivider plain />
                <ProCard
                  bodyStyle={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "flex-start",
                    gap: "24px",
                  }}
                  bordered={false}
                  title={
                    <CustomSubTitle>Amend Parking Information</CustomSubTitle>
                  }
                  layout="center"
                >
                  <span className="choose-date">Choose Parking Entry Date</span>
                  <div style={wrapperStyle}>
                    <Calendar
                      locale={weekLabels}
                      fullscreen={false}
                      //cellRender={customCellRender}
                      fullCellRender={customCellRender}
                      headerRender={() => {
                        return (
                          <div style={{ padding: 8, textAlign: "center" }}>
                            <Typography.Title level={4}>
                              September 2024
                            </Typography.Title>
                          </div>
                        );
                      }}
                      onPanelChange={onPanelChange}
                    />
                    <Calendar
                      locale={weekLabels}
                      style={{ border: "none" }}
                      fullscreen={false}
                      fullCellRender={customCellRender}
                      headerRender={() => {
                        return (
                          <div style={{ padding: 8, textAlign: "center" }}>
                            <Typography.Title level={4}>
                              September 2024
                            </Typography.Title>
                          </div>
                        );
                      }}
                      onPanelChange={onPanelChange}
                    />
                  </div>
                  <span className="choose-period">Choose Parking Period</span>
                  <Slider
                    marks={marks}
                    defaultValue={30}
                    onChange={onChangeSlider}
                    onChangeComplete={onChangeCompleteSlider}
                    style={{ width: "428px", height: "54px" }}
                  />

                  <Descriptions
                    column={5}
                    layout="vertical"
                    title={`Parking Date: 24/9/2024 (1 Day)`}
                    contentStyle={BookingContentStyle}
                    labelStyle={BookingLabelStyle}
                    className="ant-descriptions-list"
                  >
                    <Descriptions.Item label="Entry Date">-</Descriptions.Item>
                    <Descriptions.Item label="Parking period">
                      1 Day
                    </Descriptions.Item>
                    <Descriptions.Item label="Payment Amount">
                      HK$0
                    </Descriptions.Item>
                  </Descriptions>
                </ProCard>
                <StyledDivider plain />
                <ProFormCheckbox name="a">
                  <div className="checkbox-content">
                    Please read and agree to our
                    <span className="highlight-text ">
                      Terms and Conditions
                    </span>
                    before submission.
                  </div>
                </ProFormCheckbox>
              </ProForm>
            </ContentBorder>
          </div>
        </div>
      </PaddingContent>
    </>
  );
};

export default ModifyBooking;
